<template>
<div>
	<!-- {{ab}} -->

	<el-table
      :data="ab"
      border
      show-summary
      v-loading="loading"
      style="width: 100%">
      	<el-table-column
        	prop="company_code"
        	label="机构编号"
        	width="100">
      	</el-table-column>
      	<el-table-column
        	prop="company_name"
        	label="机构名称"
        	width="180">
      	</el-table-column>
      	<el-table-column
	        prop="total"
	        sortable
	        label="余额"
	        width="140">
      	</el-table-column>

      	<el-table-column
	        prop="fx999"
	        sortable
	        label="最高权限"
	        width="140">
      	</el-table-column>

      	<el-table-column
	        prop="fx1"
	        sortable
	        label="一级"
	        width="140">
      	</el-table-column>

      	<el-table-column
	        prop="fx2"
	        sortable
	        label="二级"
	        width="140">
      	</el-table-column>

      	<el-table-column
	        prop="fx0"
	        sortable
	        label="普通"
	        width="140">
      	</el-table-column>

      	<el-table-column
	    	fixed="right"
	    	label="操作"
	      >
	      <template slot-scope="scope">
	        <el-button @click="handleClick(scope.row)" type="text" size="small">
	        详情</el-button>
	        <br>
	      </template>
	    </el-table-column>

      
    </el-table>


</div>		
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	name: 'accountBalance',
		data () {
		return {
			loading : true,
		 //  	accountBalance : [
			//   	{
			//   		"company_code":"LW0005",
			//   		"price":10.16,
			//   		"nickname":"咖啡猫（旅游产业中心）",
			//   		"fx_level":"0","user_base":"wx131-oJAu601kDEie0zf_v_m9ovb-Vzh4",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKCaoliborSHPgcedpiaqsfMib9NYXrerjTWmTpSichKIw7VCDhV4Dgoiaiaia55tvaUUtI5LyS0GYFydiazg/0"
			//   	},
			//   	{
			//   		"company_code":"LW0005",
			//   		"price":0.00,
			//   		"nickname":"一個。🍉大西瓜🍉",
			//   		"fx_level":"1",
			//   		"user_base":"wx131-oJAu60w7-POTBlh1P75TeWq6teo8",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eryD105ZeVRbpicW1lwKDVwDicZoA7FplpkzPrsZzZv0kbcwZ63EF6ZRFHyEvk3icToia8MbzFrPzgJhQ/0"
			//   	},
			//   	{
			//   		"company_code":"LW0005",
			//   		"price":3.00,
			//   		"nickname":"马妮娜（旅游局产业中心）",
			//   		"fx_level":"2",
			//   		"user_base":"wx131-oJAu60y4tVT9kA_w0Aqn2GXHDqbE",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKoP0oITibx8frvFsEds0KoI2rXAiaZUyGonVRDicxf6MSdGeyrdtO7D201icalRAI1n14vqXOraprWGQ/0"
			//   	},
			//   	{
			//   		"company_code":"LW0015",
			//   		"price":10.16,
			//   		"nickname":"咖啡猫（旅游产业中心）",
			//   		"fx_level":"0","user_base":"wx131-oJAu601kDEie0zf_v_m9ovb-Vzh4",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKCaoliborSHPgcedpiaqsfMib9NYXrerjTWmTpSichKIw7VCDhV4Dgoiaiaia55tvaUUtI5LyS0GYFydiazg/0"
			//   	},
			//   	{
			//   		"company_code":"LW0015",
			//   		"price":0.00,
			//   		"nickname":"一個。🍉大西瓜🍉",
			//   		"fx_level":"1",
			//   		"user_base":"wx131-oJAu60w7-POTBlh1P75TeWq6teo8",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eryD105ZeVRbpicW1lwKDVwDicZoA7FplpkzPrsZzZv0kbcwZ63EF6ZRFHyEvk3icToia8MbzFrPzgJhQ/0"
			//   	},
			//   	{
			//   		"company_code":"LW0015",
			//   		"price":0.00,
			//   		"nickname":"马妮娜（旅游局产业中心）",
			//   		"fx_level":"2",
			//   		"user_base":"wx131-oJAu60y4tVT9kA_w0Aqn2GXHDqbE",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKoP0oITibx8frvFsEds0KoI2rXAiaZUyGonVRDicxf6MSdGeyrdtO7D201icalRAI1n14vqXOraprWGQ/0"
			//   	},
			//   	{
			//   		"company_code":"LW0018",
			//   		"price":10.16,
			//   		"nickname":"咖啡猫（旅游产业中心）",
			//   		"fx_level":"0","user_base":"wx131-oJAu601kDEie0zf_v_m9ovb-Vzh4",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKCaoliborSHPgcedpiaqsfMib9NYXrerjTWmTpSichKIw7VCDhV4Dgoiaiaia55tvaUUtI5LyS0GYFydiazg/0"
			//   	},
			//   	{
			//   		"company_code":"LW0018",
			//   		"price":4.00,
			//   		"nickname":"一個。🍉大西瓜🍉",
			//   		"fx_level":"1",
			//   		"user_base":"wx131-oJAu60w7-POTBlh1P75TeWq6teo8",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83eryD105ZeVRbpicW1lwKDVwDicZoA7FplpkzPrsZzZv0kbcwZ63EF6ZRFHyEvk3icToia8MbzFrPzgJhQ/0"
			//   	},
			//   	{
			//   		"company_code":"LW0018",
			//   		"price":0.00,
			//   		"nickname":"马妮娜（旅游局产业中心）",
			//   		"fx_level":"2",
			//   		"user_base":"wx131-oJAu60y4tVT9kA_w0Aqn2GXHDqbE",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKoP0oITibx8frvFsEds0KoI2rXAiaZUyGonVRDicxf6MSdGeyrdtO7D201icalRAI1n14vqXOraprWGQ/0"
			//   	},
			//   	{
			//   		"company_code":"LW0018",
			//   		"price":4.00,
			//   		"nickname":"xx",
			//   		"fx_level":"2",
			//   		"user_base":"wx131-oJAu60y4tVT9kA_w0Aqn2GXHDqbE",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKoP0oITibx8frvFsEds0KoI2rXAiaZUyGonVRDicxf6MSdGeyrdtO7D201icalRAI1n14vqXOraprWGQ/0"
			//   	},
			//   	{
			//   		"company_code":"LW0018",
			//   		"price":5.00,
			//   		"nickname":"1122",
			//   		"fx_level":"2",
			//   		"user_base":"wx131-oJAu60y4tVT9kA_w0Aqn2GXHDqbE",
			//   		"headimgurl":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKoP0oITibx8frvFsEds0KoI2rXAiaZUyGonVRDicxf6MSdGeyrdtO7D201icalRAI1n14vqXOraprWGQ/0"
			//   	},
			// ]
		}
	},

	props: {

	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'accountBalance',
		]),

		//根据数据构造数据结构。
		/*
			obj

			{
				'LW0005' : {
					'0' : [{}, {}, {}],
					'1' : [{}, {}, {}],
					'2' : [{}, {}, {}],
				},
				'LW0015' : {
					'0' : [{}, {}, {}],
					'1' : [{}, {}, {}],
					'2' : [{}, {}, {}],
				},
				'LW0018' : {
					'0' : [{}, {}, {}],
					'1' : [{}, {}, {}],
					'2' : [{}, {}, {}],
				},
			}
			

			转换成可以显示的数组，并得出总额。

			arr

			[
				{
					'company_code' : 'LW0005',
					'company_name' : '遛遛儿',
					'total' : 0,	//总余额
					'fx0' : 0,		//最高权限余额
			    	'fx1' : 0,		//一级余额
			    	'fx2' : 0,		//二级余额
					'fx_level' : [
						[{}, {}, {}], //0
						[{}, {}, {}], //1
						[{}, {}, {}]  //2
					]
				},
				{
					'company_code' : 'LW0015',
					'company_name' : '妈妈网平台',
					'total' : 0,	//总余额
					'fx0' : 0,		//最高权限余额
			    	'fx1' : 0,		//一级余额
			    	'fx2' : 0,		//二级余额
					'fx_level' : [
						[{}, {}, {}], //0
						[{}, {}, {}], //1
						[{}, {}, {}]  //2
					]
				},
				{
					'company_code' : 'LW0018',
					'company_name' : '大驭网',
					'total' : 0,	//总余额
					'fx0' : 0,		//最高权限余额
			    	'fx1' : 0,		//一级余额
			    	'fx2' : 0,		//二级余额
					'fx_level' : [
						[{}, {}, {}], //0
						[{}, {}, {}], //1
						[{}, {}, {}]  //2
					]
				}
			]


		*/
		ab () {

			if(this.accountBalance.length > 0) {
				this.loading = false;
			}
			
			var obj = {};

			for (var i = 0, j = this.accountBalance.length; i < j; i++){
				var tmp = this.accountBalance[i];

				if(obj[tmp.company_code] == undefined){
					obj[tmp.company_code] = {};
					obj[tmp.company_code][tmp.fx_level] = [];
				}else{
					if(obj[tmp.company_code][tmp.fx_level] == undefined){
						obj[tmp.company_code][tmp.fx_level] = [];
					}
				}

				obj[tmp.company_code][tmp.fx_level].push(tmp);
			}

			console.log(obj);

			var arr = [];
			for (var key in obj) {
			    console.log(key);
			    var o = {
			    	'company_code' : key,
			    	'fx_level' : new Array(3),
			    	'total' : 0,
			    	'fx999' : 0,	//最高权限
			    	'fx1' : 0,
			    	'fx2' : 0,
			    	'fx0' : 0,		//普通用户
			    };

			    //遍历级别，k ： 0，1，2
			    for (var k in obj[key]){
			    	o.fx_level[parseInt(k)] = obj[key][k];
			    	for (var m = 0; m < obj[key][k].length; m++){
			    		if(o['company_name'] == undefined){
			    			o['company_name'] = obj[key][k][m].company_name;
			    		}
			    		o.total += parseFloat(obj[key][k][m].price);
			    		o['fx' + k] += parseFloat(obj[key][k][m].price);
			    	}
			    }

			    o.total = Math.round(o.total * 100) / 100;
			    o.fx999 = Math.round(o.fx999 * 100) / 100;
			    o.fx1 = Math.round(o.fx1 * 100) / 100;
			    o.fx2 = Math.round(o.fx2 * 100) / 100;
			    o.fx0 = Math.round(o.fx0 * 100) / 100;

			    arr.push(o);
			}

			console.log('arr');
			console.log(arr);

			return arr;
		}
	},

	methods : {
		handleClick () {

		},
	},

	watch : {
	    
	},

	mounted () {
		
		this.$store.dispatch('getAccountBalance');
	},

}
</script>

<style scoped>

</style>
